<template>
  <Form
    ref="formCustom"
    :model="formCustom"
    :label-width="80"
  >
    <FormItem
      label="作者"
      prop="author"
    >
      <Input
        type="text"
        v-model="formCustom.author"
      ></Input>
    </FormItem>
    <FormItem
      label="介绍"
      prop="passwdCheck"
    >
      <Input
        type="text"
        v-model="formCustom.conDesc"
      ></Input>
    </FormItem>
    <FormItem
      label="封面"
      prop="passwdCheck"
    >
      <div>
        <img
          style="width:100px;height:100px"
          :src="formCustom.cover"
          alt="封面"
        >
      </div>
      <Upload
        action="//jsonplaceholder.typicode.com/posts/"
        :before-upload="handleUpload"
      >
        <Button>上传图片</Button>
      </Upload>
    </FormItem>
    <FormItem
      label="内容"
      prop="age"
    >
      <div id="editorId"></div>
    </FormItem>
  </Form>
</template>
<script>
// import Editor from "_c/editor";
import Editor from "wangeditor";
import { uploadInit } from "@/api/upimg";
var self;
export default {
  props: ["item"],
  data() {
    return {
      content: "",
      isLocal: true,
      localTime: null,
      isLocalTime: 1000, //本地缓存的延迟时间
      formCustom: {
        author: "",
        conDesc: "",
        cover:
          "https://image.yangpinwang.com/2021/01/31/middle/2956507_944ecd5ec6b4a7aeed916bb8f99c2823_1612093917.gif",
        html: ""
      },
      ruleCustom: {
        // passwd: [{ validator: validatePass, trigger: "blur" }],
        // passwdCheck: [{ validator: validatePassCheck, trigger: "blur" }],
        // age: [{ validator: validateAge, trigger: "blur" }]
      }
    };
  },
  updated() {
    this.$emit("on-wst-articles-click", this.formCustom);
  },
  // watch: {
  //   "formCustom.author": () => {
  //     self.emit();
  //   },
  //   "formCustom.conDesc": () => {
  //     self.emit();
  //   },
  //   "formCustom.cover": () => {
  //     self.emit();
  //   },
  //   "formCustom.html": () => {
  //     self.emit();
  //   }
  // },
  mounted() {
    self = this;
    const editor = new Editor("#editorId");
    editor.config.uploadImgServer = "/upload-img";
    editor.config.customUploadImg = uploadInit;
    editor.config.onchangeTimeout = 500; // 修改为 500ms
    editor.config.onchange = newHtml => {
      if (this.isLocal) {
        if (this.localTime) {
          clearTimeout(this.localTime);
        }
        this.localTime = setTimeout(() => {
          localStorage.setItem("localHtml", newHtml);
          this.$Message.info("本地保存成功");
        }, this.isLocalTime);
      }
      this.$set(this.formCustom, "html", newHtml);
      this.$emit("on-wst-articles-click", this.formCustom);
    };
    editor.create();
    if (this.isLocal) editor.txt.html(localStorage.getItem("localHtml"));
  },
  // components: { Editor },
  methods: {
    emit() {
      this.$emit("on-wst-articles-click", this.formCustom);
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleUpload(files) {
      uploadInit([files], res => {
        this.$set(this.formCustom, "cover", res);
      });
      return false;
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleChange(html, text) {
      console.log(html, text);
    }
  }
};
</script>
